<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/testResult.css">
  <title>培训管理</title>
</head>
<script>
  function getParam(name) {
    return location.href.match(new RegExp('[?#&]' + name + '=([^?#&]+)', 'i')) ? RegExp.$1 : '';
  }
  var magicHtmlPath = '/obpm/html'
  var obpmFilePath = '/obpm'
  var appName = getParam('magicAppName')
  var accessToken = getParam('accessToken')
  document.cookie = "accessToken=" + accessToken + ";path=/";
  localStorage.setItem("accessToken", accessToken)
  var ajax = function (data) {
    return new Promise((resolve, reject) => {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (
            (xhr.status >= 200 && xhr.status < 300) ||
            xhr.status === 304
          ) {
            // resolve(xhr.responseText);
            data.success(xhr.responseText);
          } else {
            reject(xhr.status);
          }
        } else {
          // HTTP请求还在继续...
        }
      };
      xhr.open(data.methods, data.url, data.async);
      xhr.setRequestHeader("content-type", "application/json");

      delete data.methods;
      delete data.url;
      xhr.send(JSON.stringify(data.data));
    });
  };
  var test_paper_id = getParam('test_paper_id');
  var exam_id = getParam('exam_id');
  var student_id = getParam('student_id');
  var full_name = getParam('full_name');
  var type = getParam('type');
  function mate(student_answer,options) {
    if(student_answer) {
      let arr  = student_answer.split(';')
      for(let i = 0;i < arr.length; i ++) {
        if(arr[i] == options) {
          return 'checked'
        }
      }
    }else {
      return ''
    }
  }
  function getResult() {
    let data = {
      test_paper_id:test_paper_id,
      exam_id:exam_id,
	  student_id:student_id,
	  full_name:full_name,
	  type:type
    }
    let examResult = {
      methods: "post",
      url: `${obpmFilePath}/magic-api/${appName}/exam_result`,
      async: true,
      data:data,
      success: function (result) {
        if(JSON.parse(result).data) {
          let exam_info = JSON.parse(result).data.exam_info
          document.getElementsByClassName('name')[0].innerHTML = exam_info.exam_name
          document.getElementsByClassName('exameDetail')[0].innerHTML = `
            用时：${exam_info.test_time} | 交卷时间：${exam_info.hand_in_time} | 考试总分：${exam_info.test_score} | 通过分数：${exam_info.pass_mark}
          `
          if(exam_info.test_result == '待阅卷') {
            document.getElementsByClassName('unread')[0].innerHTML = `
            <div class="unreadResult">${exam_info.test_result}</div>
            <div class="unreadTips">目前成绩仅为系统判分部分，需等待阅卷完成后显示完整成绩哦！</div>
            <div><span class="remind">提醒阅卷</span></div>`
          }else if(exam_info.test_result == '未通过') {
            document.getElementsByClassName('unPass')[0].innerHTML = `
            <span class="total">总分：<span class="score">${exam_info.total_student_score}</span></span>
            `
            document.getElementsByClassName('tag')[0].innerHTML = exam_info.test_result
            document.getElementsByClassName('tag')[0].style.color = '#f56c6c'
            if(type=='teacher'){
              let exam_list = JSON.parse(result).data.exam_list
            let passHtml = ''
            for(let i = 0; i < exam_list.length; i ++) {
              if(exam_list[i].question_type == '单选题') {
                let options = exam_list[i].options
                let student_answer_html = ''//回答
                let optionsHtml = ''
                let answer_html = '' //参考答案
                for(let j = 0; j < options.length; j ++) {
                  optionsHtml += `<div class="onceOption"><input type="radio" value="${options[j]}" disabled ${mate(exam_list[i].student_answer,options[j]) ? 'checked' : ''}>${String.fromCharCode(65+j)}、${options[j]}</div>`
                  answer_html += `<div class="onceOption"><input type="radio" value="${options[j]}" disabled ${mate(exam_list[i].answer,options[j]) ? 'checked' : ''}>${String.fromCharCode(65+j)}、${options[j]}</div>`
                }
                passHtml += `
                <div class="exameOnce">
                  <div class="examTopic"><span class="order">${i + 1}、</span>${exam_list[i].question_type}：${exam_list[i].question_name}     (分值：${exam_list[i].score} )</div>
                  <div class="examOption">
                    <div class="left">回答：</div>
                    ${optionsHtml}
                  </div>
                  <div class="examOption">
                    <div class="left">参考答案：</div>
                    ${answer_html}
                  </div>
                  <div class="examOption">
                    <div class="left">得分：</div>
                    <div class="passScroe">${exam_list[i].student_score}</div>
                  </div>
                </div>
                `
              }else if(exam_list[i].question_type == '多选题') {
                let options = exam_list[i].options
                let optionsHtml = ''
                let student_answer_html = ''//回答
                let answer_html = '' //参考答案
                for(let j = 0; j < options.length; j ++) {
                  optionsHtml += `<div class="onceOption"><input type="checkbox" value="${options[j]}" disabled ${mate(exam_list[i].student_answer,options[j]) ? 'checked' : ''}>${String.fromCharCode(65+j)}、${options[j]}</div>`
                  answer_html += `<div class="onceOption"><input type="checkbox" value="${options[j]}" disabled ${mate(exam_list[i].answer,options[j]) ? 'checked' : ''}>${String.fromCharCode(65+j)}、${options[j]}</div>`
                }
                passHtml += `
                <div class="exameOnce">
                  <div class="examTopic"><span class="order">${i + 1}、</span>${exam_list[i].question_type}：${exam_list[i].question_name}     (分值：${exam_list[i].score} )</div>
                  <div class="examOption">
                    <div class="left">回答：</div>
                    ${optionsHtml}
                  </div>
                  <div class="examOption">
                    <div class="left">参考答案：</div>
                    ${answer_html}
                  </div>
                  <div class="examOption">
                    <div class="left">得分：</div>
                    <div class="passScroe">${exam_list[i].student_score}</div>
                  </div>
                </div>
                `
              }else {
                let optionsHtml = ''
                passHtml += `
                <div class="exameOnce">
                  <div class="examTopic"><span class="order">${i + 1}、</span>${exam_list[i].question_type}：${exam_list[i].question_name}     (分值：${exam_list[i].score} )</div>
                  <div class="examOption">
                    <div class="left">回答：</div>
                    <div class="onceOption">${exam_list[i].student_answer}</div>
                  </div>
                  <div class="examOption">
                    <div class="left">参考答案：</div>
                    <div class="onceOption">${exam_list[i].answer}</div>
                  </div>
                  <div class="examOption">
                    <div class="left">得分：</div>
                    <div class="passScroe">${exam_list[i].student_score}</div>
                  </div>
                </div>
                `
              }
            }
            passHtml += `
              <div style="text-align:right;padding-bottom:10px;"><span class="total">总分：<span class="score">${exam_info.total_student_score}</span></span></div>
            `
            document.getElementsByClassName('pass')[0].innerHTML = passHtml
            }


            
          }else {
            document.getElementsByClassName('tag')[0].innerHTML = exam_info.test_result
            document.getElementsByClassName('tag')[0].style.color = '#67C23A'
            let exam_list = JSON.parse(result).data.exam_list
            let passHtml = ''
            for(let i = 0; i < exam_list.length; i ++) {
              if(exam_list[i].question_type == '单选题') {
                let options = exam_list[i].options
                let student_answer_html = ''//回答
                let optionsHtml = ''
                let answer_html = '' //参考答案
                for(let j = 0; j < options.length; j ++) {
                  optionsHtml += `<div class="onceOption"><input type="radio" value="${options[j]}" disabled ${mate(exam_list[i].student_answer,options[j]) ? 'checked' : ''}>${String.fromCharCode(65+j)}、${options[j]}</div>`
                  answer_html += `<div class="onceOption"><input type="radio" value="${options[j]}" disabled ${mate(exam_list[i].answer,options[j]) ? 'checked' : ''}>${String.fromCharCode(65+j)}、${options[j]}</div>`
                }
                passHtml += `
                <div class="exameOnce">
                  <div class="examTopic"><span class="order">${i + 1}、</span>${exam_list[i].question_type}：${exam_list[i].question_name}     (分值：${exam_list[i].score} )</div>
                  <div class="examOption">
                    <div class="left">回答：</div>
                    ${optionsHtml}
                  </div>
                  <div class="examOption">
                    <div class="left">参考答案：</div>
                    ${answer_html}
                  </div>
                  <div class="examOption">
                    <div class="left">得分：</div>
                    <div class="passScroe">${exam_list[i].student_score}</div>
                  </div>
                </div>
                `
              }else if(exam_list[i].question_type == '多选题') {
                let options = exam_list[i].options
                let optionsHtml = ''
                let student_answer_html = ''//回答
                let answer_html = '' //参考答案
                for(let j = 0; j < options.length; j ++) {
                  optionsHtml += `<div class="onceOption"><input type="checkbox" value="${options[j]}" disabled ${mate(exam_list[i].student_answer,options[j]) ? 'checked' : ''}>${String.fromCharCode(65+j)}、${options[j]}</div>`
                  answer_html += `<div class="onceOption"><input type="checkbox" value="${options[j]}" disabled ${mate(exam_list[i].answer,options[j]) ? 'checked' : ''}>${String.fromCharCode(65+j)}、${options[j]}</div>`
                }
                passHtml += `
                <div class="exameOnce">
                  <div class="examTopic"><span class="order">${i + 1}、</span>${exam_list[i].question_type}：${exam_list[i].question_name}     (分值：${exam_list[i].score} )</div>
                  <div class="examOption">
                    <div class="left">回答：</div>
                    ${optionsHtml}
                  </div>
                  <div class="examOption">
                    <div class="left">参考答案：</div>
                    ${answer_html}
                  </div>
                  <div class="examOption">
                    <div class="left">得分：</div>
                    <div class="passScroe">${exam_list[i].student_score}</div>
                  </div>
                </div>
                `
              }else {
                let optionsHtml = ''
                passHtml += `
                <div class="exameOnce">
                  <div class="examTopic"><span class="order">${i + 1}、</span>${exam_list[i].question_type}：${exam_list[i].question_name}     (分值：${exam_list[i].score} )</div>
                  <div class="examOption">
                    <div class="left">回答：</div>
                    <div class="onceOption">${exam_list[i].student_answer}</div>
                  </div>
                  <div class="examOption">
                    <div class="left">参考答案：</div>
                    <div class="onceOption">${exam_list[i].answer}</div>
                  </div>
                  <div class="examOption">
                    <div class="left">得分：</div>
                    <div class="passScroe">${exam_list[i].student_score}</div>
                  </div>
                </div>
                `
              }
            }
            passHtml += `
              <div style="text-align:right;padding-bottom:10px;"><span class="total">总分：<span class="score">${exam_info.total_student_score}</span></span></div>
            `
            document.getElementsByClassName('pass')[0].innerHTML = passHtml
          }
        }else {
        }
      }
    }
    ajax(examResult)
  }
</script>
<body onload="getResult()">
  <div id="main">
    <!-- <div class="header">
      考试结果
    </div> -->
    <div class="content">
      <div class="exameIntroduc">
        <div class="exameName">
          <div class="name">入职myapps技能考试</div><div class="tag"></div>
        </div>
        <div class="exameDetail">
        </div>
      </div>
      <div class="unread"></div>
      <div class="unPass"></div>
      <div class="pass"></div>
    </div>
  </div>
</body>
</html>